<template>
	<el-row id="container">
		<!-- <MEHeader></MEHeader> -->
		<el-col :span="24" id="MEoutter_container">

				<el-col :span="24" id="searchtool">

					<el-col :span="10" class="ncon">
						<el-col :span="23" class="inputcontainer">
							<el-input id="MEtxnum" placeholder="请输入单号" size="large" v-model="txsnum" clearable @input="idsearch()" v-bind:disabled="this.inputflag1"></el-input>
						</el-col>
					</el-col>

					<el-col :span="10" class="ncon">
						<el-col :span="23" class="inputcontainer">
							<el-input id="MEtxid" placeholder="请输入交易ID" size="large" v-model="txsid" clearable @input="idsearch()" v-bind:disabled="this.inputflag2"></el-input>
						</el-col>
					</el-col>

					<el-col :span="2" id="MEsearchbtn">
						<!-- <el-button icon="el-icon-search" size="small" circle v-on:click="queryblock"></el-button> -->
						<el-button type="primary" icon="el-icon-search" v-on:click="querytxs"></el-button>
					</el-col>

				</el-col>

				<el-col :span="24" id="MEtxinfo">

					<div class="MEtabletitle">
						<!-- <div id="blockicon"></div> -->
						<span id="MEtxicon"></span>
						<span class="MEtitle">交易列表</span>
					</div>

					<el-col :span="24" id="MEtxtable">
						<div class="MEtxsinfotable" v-for="d in tableData" v-on:click="txreaddetail(d)">
							<span class="MEtxtype">{{d.type}}</span>
							<label class="MEmarket">{{d.extra.marketName}}</label>
							</br>
							<label class="MEtxhash">{{d.mark}}</label>
							<label class="MEtxtime">{{timeformatter(d.time)}}</label>
						</div>
					</el-col>

				</el-col>

				<el-col :span="24" id="MEpaging">
					<el-pagination id="MEpagingc" small background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total"></el-pagination>
				</el-col>

		</el-col>
		<MEFooter class="f"></MEFooter>
	</el-row>
</template>

<script>

	import MEHeader from '../MEcomponents/MEheader.vue'
	import MEFooter from '../MEcomponents/MEfooter.vue'

	export default {

		components: { 
			MEHeader, 
			MEFooter 
		},

		data () {
			return {
				list: "",
				txsid: "",
				txsnum: "",
				total: 0, //%10+1
			    inputflag1: false,
				inputflag2: false,
			    currentPage: 1,
			    tableData: null,
			    fflag: 1,
			}
		},

		created () {
			// this.current_time = parseInt(new Date().valueOf() / 1000)
		},

		mounted () {
			this.setData()
		},

		destroyed () {
			eventBus.$emit('txdetail',this.list)
		},

		methods: {

			ellipsis (value) {
				if (!value) return ''
				if (value.length > 8) {
					return value.slice(0,8) + '...'
				}
				return value
			},

			timeformatter: function(d) {
				let date
				let temp = d
				if(temp.toString().length===10)
				{
					date = new Date(temp * 1000)
				} else {
					date = new Date(temp)
				}
				let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
				function paddNum(s) {
					s += ""
					return s.replace(/^(\d)$/,"0$1");
				}
				let h = paddNum(date.getHours());
				let m = paddNum(date.getMinutes());
				let s = paddNum(date.getSeconds());
				a = a + " " + h + ":" + m + ":" + s
				return a;
			},
			//跳转到交易详细信息页面
			txreaddetail(d) {

				let param = {
					txHash:d.txHash
				}

				this.$api.post('blockchain/tx', param, r => {
					this.list = r
					this.$router.push(`/MEtransactions/${JSON.stringify(r.data.txHash)}`)
				})

			},
			//交易信息查询
			querytxs () {
				if (this.txsid === "" && this.txsnum === "") {
					alert("搜索内容为空")
				} else {

					let param = {
						txHash:this.txsid,
						mark:this.txsnum
					}

					this.$api.post('blockchain/tx', param, success => {
						this.list = success
						this.$router.push(`/MEtransactions/${JSON.stringify(success.data.txHash)}`)
					}, failure => {
						alert("该交易不存在")
					})
				}
				
			},

			idsearch () {
				if (this.txsid === "" && this.txsnum === "") {
					this.inputflag1 = false
					this.inputflag2 = false
				} else if (this.txsid != "") {
					this.txsnum = ""
					this.inputflag1 = true
				} else if (this.txsnum != "") {
					this.txsid = ""
					this.inputflag2 = true
				}
			},

			setData (){
				let param
				if (this.fflag != 1) {
					param = {
						number:this.total,
						itemsPerPage:10,
						whichPage:this.currentPage
					}
				} else if(this.fflag === 1){
					param = {
						itemsPerPage:10,
						whichPage:this.currentPage
					}
					this.fflag = 0
				}
				this.$api.post('blockchain/txs', param, r => {
					this.tableData = r.data
					if (this.total === 0) {
						this.total = r.data[0].number
					}
					this.tableData.forEach(function(i,index) {
						let a
						switch (i.type) {
							case "RetailInfo": a="零售单"; i["type"]=a; break;
							case "SaleInfo" : a="销售单"; i["type"]=a; break;
							case "PurchaseInfo" : a="进货单"; i["type"]=a; break;
							case "ReceiveInfo" : a="收货单"; i["type"]=a; break;
							case "AccessCertificate" : a="准入证明"; i["type"]=a; break;
							case "Market" : a="市场检查表"; i["type"]=a; break;
							case "Gov" : a="日常检查表"; i["type"]=a; break;
							default : console.log("haven't such type"); break;
						}
					})
				})
			},

            handleCurrentChange(val){
              this.currentPage = val
              this.tableData = this.setData()
            }
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.f {
		position: fixed;  
    	bottom: 0;  
	}

	.inputcontainer>>>.el-input__inner::placeholder {
		font-size: 0.3rem;
	}

	.inputcontainer>>>.el-input__inner {
		height: 0.7rem;
		line-height: 0.7rem;
		padding: 0 0.3rem;
	}

	.inputcontainer>>>.el-input {
		font-size: 0.3rem;
	}

	.inputcontainer>>>.el-input__clear {
		font-size: 0.28rem;
		line-height: 0.7rem;
		width: 0.7rem;
	}

	#MEsearchbtn>>>.el-button {
		padding: 0.18rem 0.2rem;
		font-size: 0.28rem;
	}

	#MEsearchbtn>>>.el-button--primary {
		background-color: #1DB2BF;
		border-color: #1DB2BF;
	}

	#MEpaging>>>.btn-prev{
		height: 0.44rem;
		min-width: 0.44rem;
	}

	#MEpaging>>>.number {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.el-icon-more {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.el-icon-d-arrow-right {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.el-icon-d-arrow-left {
		height: 0.44rem;
		min-width: 0.44rem;
		line-height: 0.44rem;
		font-size: 0.24rem;
	}

	#MEpaging>>>.btn-next{
		height: 0.44rem;
		min-width: 0.44rem;
	}

	#container {
		/*position: absolute;*/
		background-color: rgb(248, 248, 248);
		margin-top: 0px;
		margin-bottom: 0px;
		height: 15.4rem;
		width: 100%;
		/*overflow-y: auto;*/
		overflow: hidden;
		box-sizing: border-box;
	}

	#MEoutter_container {
		height: 93%;
		/*margin-top: 4.5px;*/
	}

	#searchtool {
		height: 1rem;
	}

	.inputcontainer {
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -0.8rem;

	}

	#MEsearchbtn {
		margin-left: 0.6%;
		position: relative;
        top: 50%;
        margin-top: -0.8rem;
	}

	.ncon {
		height: 100%;
		margin-left: 2%;
	}

	.MEtabletitle {
		background-color: rgb(255, 255, 255);
		height: 0.7rem;
		width: 96%;
		margin-left: 2%;
		/*padding-top: 10px;*/
		margin-bottom: 0.2rem;
		border-radius: 0.05rem;
		display: block;
		box-shadow: 0 1px 2px 0 rgba(179,179,179,0.50);
		color: #262626;
		/*border:0.7px solid #B3B3B3;*/
	}

	#MEtxicon {
		float: left;
		width: 0.38rem;
		height: 0.38rem;
		/*margin:0 auto;*/
		position: relative;
		top: 50%;
		margin-top: -0.19rem;
		margin-left: 0.12rem;
		/*margin-top: 0.17rem;*/
		background-image:url('../assets/icon_trade_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		/*display: inline-block;*/
	}

	.MEtitle {
		float: left;
		font-size: 0.3rem;
		color: #262626;
		line-height: 0.7rem;
		/*margin-top: 0.12rem;*/
		margin-left: 0.04rem;
	}

	#MEtxinfo {
		border-radius:0.1rem;
		height: 12.3rem;
		width: 100%;
		margin-top: 0.03rem;
	}

	#MEtxtable {
		height: 11.4rem;
		width: 98%;
		margin-left: 2%;
		overflow: hidden;
		/*box-shadow: 0 0 1px 0 rgba(179,179,179,0.50);*/
	}

	.MEtxsinfotable {
		box-shadow: 0 0.01rem 0.02rem 0 rgba(179,179,179,0.50);
		/*height: auto;*/
		height: 1.1rem;
		width: 98%;
		background-color: rgb(255,255,255);
		border-bottom: solid 0.01rem rgba(179,179,179,0.50);
	}

	.MEtxtype {
		float: left;
		font-size: 0.3rem;
		margin-left: 0.2rem;
		margin-top: 0.13rem;
		color: #262626;
	}

	.MEmarket {
		float: right;
		font-size: 0.23rem;
		margin-right: 0.2rem;
		margin-top: 0.18rem;
		color: #262626;

		width: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.MEtxhash {
		float: left;
		position: absolute;
		/*display: block;*/
		margin-top: -0.45rem;
		margin-left: 0.25rem;
		font-size: 0.23rem;
		color: #737373;
	}

	.MEtxtime {
		float: right;
		font-size: 0.23rem;
		color: #737373;
		margin-top: -0.45rem;
		margin-right: 0.16rem;
	}
	
	#MEpaging {
		text-align: center;
		width: 100%;
		/*margin-left: 3rem;*/
		height: 0.7rem;
	}

	#MEpagingc {
		position: relative;
        top: 50%;
        margin-top: -0.28rem;
        height: 80%;
	}

</style>